<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.*,java.text.*,java.lang.*" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎进入注册界面</title>
		<link rel="stylesheet" type="text/css" href="css/registe-style.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			//输入框提示
			function showTips(id,info){
				// alert(123);
				var emp = $("#registe-"+id).val();
				if(emp == ""){
					$("#span-"+id).html("<font color='red' size='5'>"+info+"</font");
				}else{
					$("#span-"+id).html(" ");
				}
			}
			//密码不一致时提示
			function isConsistent(password,repassword){
				var password = $("#registe-password").val();
				var repassword = $("#registe-repassword").val();
				if(password =="" || repassword == ""){
					
				}else if(password !="" && repassword != ""){
						if(password != repassword){
							$("#span-repassword").html("<font color='red' size='5'>密码不一致，请重新确认</font")
							return;
						}
				}
			}
			
			function isLoginNull(){
//				alert(123);
				var registe_username = $("#registe-username").val();
				var registe_email = $("#registe-email").val();
				var registe_password = $("#registe-password").val();
				var registe_repassword = $("#registe-repassword").val();
				var registe_phone = $("#registe-phone").val();
				if( registe_username == "" || registe_email == "" || registe_password == ""|| registe_repassword == "" || registe_phone == ""){
					 //alert(123);
					if(registe_username == ""){
						$("#span-username").html("用户名不能为空");
						 return false;
					}else{
						$("#span-username").html("");
					}
					if(registe_email == ""){
						$("#span-email").html("邮件不能为空");
						 return false;
					}else{
						$("#span-email").html("");
					}
					if(registe_password == ""){
						$("#span-password").html("密码不能为空");
						 return false;
					}else{
						$("#span-password").html("");
					}
					if(registe_repassword == ""){
						$("#span-repassword").html("请确认密码");
						 return false;
					}else{
						$("#span-repassword").html("");
					}
					if(registe_phone == ""){
						$("#span-phone").html("号码不能为空");
						 return false;
					}else{
						$("#span-phone").html("");
					}
				}else{
					return true;
				}
			}
			
			function isUsername(){
					var username = $("#registe-username").val();
					if(username != ""){
					$.post(
						"${pageContext.request.contextPath}/check",
						{"username": username},
						function(data){
							var isExist = data.isUsername;
							var usernameInfo = "";
							if(isExist){
								usernameInfo = "该用户名已经存在";
							}else{
								usernameInfo = "该用户可以使用"
							}
							$("#span-username").html(usernameInfo);
						},
						"json"
					);	
				}else{
					
				}
			}
			function isEmail(){
				var email = $("#registe-email").val();
				if(email != ""){
				$.post(
					"${pageContext.request.contextPath}/check",
					{"email": email},
					function(data){
						var isEmail = data.isEmail;
						var emailInfo = "";
						if(isEmail){
							 emailInfo = "该邮箱名已存在";
						}else{
							 emailInfo = "该邮箱可以使用"
						}
						$("#span-email").html(emailInfo);
					},
					"json"
				);	
			}else{
				
			}
		}
			function isPhone(){
				var phone = $("#registe-phone").val();
				if(phone != ""){
				$.post(
					"${pageContext.request.contextPath}/check",
					{"phone": phone},
					function(data){
						var isPhone = data.isPhone;
						var phoneInfo = "";
						if(isPhone){
							phoneInfo = "该号码名已存在";
						}else{
							phoneInfo = "该号码可以使用"
						}
						$("#span-phone").html(phoneInfo);
					},
					"json"
				);	
			}else{
				
			}
		}
		</script>
	</head>
	<body>
		<div id ="registe-header">
			您将在此处进行注册,请认真填写下列信息
		</div>
		<div style="width1200px; height:0.5px;background:silver;font-size:0;"></div>
		<div id="registe-body">
			<div id="registe-form">
				<form action="/cn.yl.caner/registe" method="post">
					<div class="registe-font" ><span class="registe-must">*</span>用&nbsp户&nbsp名:</div>
					<div class="registe-input">
						<input type="text" name="username" id="registe-username" value="" maxlength="8"
						 onfocus="showTips('username','一定要写用户名哦!')" onblur="showTips('username','不能不写用户名哦!'),isUsername()"/> 
						<span id="span-username" style="font-size:25px;color:red;"></span>
					</div>
					<div class="registe-font"><span class="registe-must">*</span>电子邮件:</div>
					<div class="registe-input">
						<input type="text" name="email" id="registe-email" value="" maxlength="20"
						onfocus="showTips('email','一定要写邮箱哦!')" onblur="showTips('email','不能不写邮箱哦~'),isEmail()"/>
						<span id="span-email"  style="font-size:25px;color:red;"></span>
					</div>
					<div class="registe-font"><span class="registe-must">*</span>登录密码:</div>
					<div class="registe-input">
						<input type="password" name="password" id="registe-password" value="" maxlength="16"
						onfocus="showTips('password','一定要写密码哦!')" onblur="showTips('password','不能不写密码哦~')"/>
						<span id="span-password"  style="font-size:25px;color:red;"></span>
					</div>
					<div class="registe-font"><span class="registe-must">*</span>确认密码:</div>
					<div class="registe-input">
						<input type="password" name="repassword" id="registe-repassword" value="" maxlength="16"
						onfocus="showTips('repassword','一定要确认密码哦!')" onblur="showTips('repassword','不能不确认密码哦~'),isConsistent('password','repassword')"/>
						<span id="span-repassword"  style="font-size:25px;color:red;"></span>
					</div>
					<div class="registe-font"><span class="registe-must">*</span>手机号码:</div>
					<div class="registe-input">
						<input type="text" name="phone" id="registe-phone" value="" maxlength="11"
						onfocus="showTips('phone','一定要确认手机号码哦!')" onblur="showTips('phone','不能不确认手机号码哦~'),isPhone()"/>
						<span id="span-phone"  style="font-size:25px;color:red;"></span>
					</div>
					<div class="clear"><br></div>
					<br/>
					<div class="regist-button">
							<input type="submit" value="提交注册" id="registe-submit"  onclick="return isLoginNull()"/>
							<a href="index.html">
								<input type="button" value="返回首页" id="registe-button" />
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>
